<template>
  <div id="errorBody">
    <div :title="errorType">{{errorType}}</div>
    <div>
      <button @click="goBackHome">go back home</button>
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
export default {
  props:{
    errorType:{
      type:Number,
      default:404
    }
  },
  setup(){
    const route = useRouter();
    const goBackHome = ()=>{
      route.push('/')
    }
    return{
      goBackHome
    }
  }
}
</script>

<style lang="scss">
@import url("https://fonts.googleapis.com/css?family=Fira+Mono:400");

#errorBody {
  display: flex;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
  margin: 0;
  background: transparent;
  color: black;
  font-size: 10vw;
  font-family: "Fira Mono", monospace;
  letter-spacing: -7px;
  animation: glitch 1s linear infinite;

  @keyframes glitch {
    2%,
    64% {
      transform: translate(2px, 0) skew(0deg);
    }
    4%,
    60% {
      transform: translate(-2px, 0) skew(0deg);
    }
    62% {
      transform: translate(0, 0) skew(5deg);
    }
  }

  div:before,
  div:after {
    content: attr(title);
    position: absolute;
    left: 0;
  }

  div:before {
    animation: glitchTop 1s linear infinite;
    clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
  }

  @keyframes glitchTop {
    2%,
    64% {
      transform: translate(2px, -2px);
    }
    4%,
    60% {
      transform: translate(-2px, 2px);
    }
    62% {
      transform: translate(13px, -1px) skew(-13deg);
    }
  }

  div:after {
    animation: glitchBotom 1.5s linear infinite;
    clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
  }

  @keyframes glitchBotom {
    2%,
    64% {
      transform: translate(-2px, 0);
    }
    4%,
    60% {
      transform: translate(-2px, 0);
    }
    62% {
      transform: translate(-22px, 5px) skew(21deg);
    }
  }

  $m-01: #fb8a8a;
  $m-02: #ffedc0;

  $bg-01: #695681;
  $bg-02: #36184f;
  $bg-03: #32243e;

  button {
    height: 40px;
    padding: 0 30px;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0px 15px 20px rgba($bg-02, 0.5);
    z-index: 3;
    color: $bg-01;
    background-color: white;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 12px;
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0px 10px 10px -10px rgba($bg-02, 0.5);
      transform: translateY(5px);
      background: $m-01;
      color: white;
    }
  }
}
</style>